<script setup>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  deleteUserById,
  freezeUserById,
  listUsers,
  unfreezeUserById
} from "@/api/user";
import {
  Search,
  UserFilled,
  Lock,
  Unlock,
  Delete,
  Edit
} from '@element-plus/icons-vue';

const users = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const username = ref('');
const nickname = ref('');
const phone = ref('');
const defaultAvatar = ref('@/assets/default-avatar.png');

// 进入页面时自动获取用户列表
onMounted(() => getUserList())

// 账号冻结、解冻、删除
const freezeUser = (id) => {
  freezeUserById(id).then(res => {
    if (res.data) {
      ElMessage.success("账号已冻结");
      getUserList();
    } else {
      ElMessage.error("冻结失败");
    }
  });
};

const unFreezeUser = (id) => {
  unfreezeUserById(id).then(res => {
    if (res.data) {
      ElMessage.success("账号已解封");
      getUserList();
    } else {
      ElMessage.error("解封失败");
    }
  });
};

const deleteUser = (id) => {
  ElMessageBox.confirm('确定永久删除该用户？', '警告', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteUserById(id).then(res => {
      if (res.data) {
        ElMessage.success("账号已删除");
        getUserList();
      } else {
        ElMessage.error("删除失败");
      }
    });
  }).catch(() => {
    ElMessage.info("已取消删除操作");
  });
}

// 获取用户列表
const getUserList = () => {
  const query = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    username: username.value,
    nickname: nickname.value,
    phone: phone.value
  }
  listUsers(query).then(res => {
    users.value = res.data.records;
    total.value = res.data.total;
  });
};

// 分页器事件
const pageNoChange = (value) => {
  pageNo.value = value
  getUserList()
}

const pageSizeChange = (value) => {
  pageSize.value = value
  getUserList()
}
</script>

<template>
  <el-card class="page-container">
    <div class="page-header">
      <h3>普通用户管理</h3>
      <p class="header-desc">管理平台所有普通用户账号，可进行查询、冻结和解封操作</p>
    </div>

    <div class="search-box">
      <el-input
          v-model="username"
          class="search-input"
          placeholder="输入用户账号"
          clearable
      />
      <el-input
          v-model="nickname"
          class="search-input"
          placeholder="输入用户昵称"
          clearable
      />
      <el-input
          v-model="phone"
          class="search-input"
          placeholder="输入用户电话"
          clearable
      />
      <el-button
          type="primary"
          class="search-btn"
          @click="getUserList"
      >
        <el-icon><Search /></el-icon> 搜索
      </el-button>
    </div>

    <el-table
        :data="users"
        class="data-table"
        border
        stripe
        :row-class-name="(_, index) => index % 2 === 0 ? 'table-row-even' : ''"
    >
      <el-table-column label="头像" width="80">
        <template #default="scope">
          <el-avatar
              :src="scope.row.avatarUrl || defaultAvatar"
              class="avatar"
          >
            <template #fallback>
              <UserFilled />
            </template>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户账号" width="160" />
      <el-table-column prop="nickname" label="用户昵称" />
      <el-table-column prop="phone" label="联系电话" width="150" />
      <el-table-column label="账号状态" width="120">
        <template #default="scope">
          <el-tag
              :type="scope.row.status === 1 ? 'success' : 'danger'"
              class="status-tag"
          >
            {{ scope.row.status === 1 ? '正常' : '封禁' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button
              type="primary"
              size="small"
              class="operation-btn edit-btn"
              v-if="false"
          >
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
          <el-button
              v-if="scope.row.status === 1"
              type="warning"
              size="small"
              class="operation-btn freeze-btn"
              @click="freezeUser(scope.row.id)"
          >
            <el-icon><Lock /></el-icon> 冻结
          </el-button>
          <el-button
              v-else
              type="success"
              size="small"
              class="operation-btn unfreeze-btn"
              @click="unFreezeUser(scope.row.id)"
          >
            <el-icon><Unlock /></el-icon> 解封
          </el-button>
          <el-button
              type="danger"
              size="small"
              class="operation-btn delete-btn"
              @click="deleteUser(scope.row.id)"
          >
            <el-icon><Delete /></el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageSizeChange"
          @current-change="pageNoChange"
      />
    </div>
  </el-card>
</template>

<style scoped lang="scss">
$primary: #1E40AF;
$primary-light: #3B82F6;
$primary-glass: rgba(30, 64, 175, 0.1);
$success: #10B981;
$warning: #F59E0B;
$danger: #EF4444;
$text-primary: #1E293B;
$text-secondary: #64748B;
$bg-light: #F8FAFC;
$border-color: #E2E8F0;
$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.page-container {
  width: 95%;
  max-width: 1400px;
  margin: 1.5rem auto;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.page-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid $border-color;

  h3 {
    margin: 0;
    color: $text-primary;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      background-color: $primary;
      border-radius: 2px;
      margin-right: 8px;
    }
  }

  .header-desc {
    margin: 0.5rem 0 0 12px;
    color: $text-secondary;
    font-size: 0.9rem;
  }
}

.search-box {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  flex-wrap: wrap;
  gap: 12px;

  .search-input {
    width: 220px;
    transition: $transition;

    &:focus-within {
      border-color: $primary;
      box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.2);
    }
  }

  .search-btn {
    background-color: $primary;
    border-color: $primary;
    padding: 0 16px;
    transition: $transition;

    &:hover {
      background-color: $primary-light;
      border-color: $primary-light;
    }

    .el-icon {
      margin-right: 6px;
      font-size: 14px;
    }
  }
}

.data-table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;

  th {
    background-color: $bg-light;
    color: $text-primary;
    font-weight: 500;
    height: 48px;
  }

  td {
    color: $text-primary;
    height: 60px;
    transition: $transition;

    &:hover {
      background-color: rgba(30, 64, 175, 0.02);
    }
  }

  .table-row-even {
    background-color: rgba(248, 250, 252, 0.5);
  }

  .avatar {
    width: 40px;
    height: 40px;
    border: 2px solid $bg-light;
    transition: $transition;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .status-tag {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
  }
}

.operation-btn {
  margin-right: 6px;
  padding: 5px 10px;
  transition: $transition;

  .el-icon {
    margin-right: 4px;
    font-size: 14px;
  }

  &:last-child {
    margin-right: 0;
  }
}

.edit-btn {
  background-color: $primary;
  border-color: $primary;

  &:hover {
    background-color: $primary-light;
    border-color: $primary-light;
  }
}

.freeze-btn {
  background-color: $warning;
  border-color: $warning;

  &:hover {
    background-color: #d97706;
    border-color: #d97706;
  }
}

.unfreeze-btn {
  background-color: $success;
  border-color: $success;

  &:hover {
    background-color: #059669;
    border-color: #059669;
  }
}

.delete-btn {
  background-color: $danger;
  border-color: $danger;

  &:hover {
    background-color: #dc2626;
    border-color: #dc2626;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 1200px) {
  .search-input {
    width: 180px !important;
  }
}

@media (max-width: 992px) {
  .search-input {
    width: 150px !important;
  }

  .operation-btn {
    padding: 5px 8px;
    font-size: 12px;

    .el-icon {
      margin-right: 2px;
      font-size: 12px;
    }
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 1.2rem;
    width: 98%;
  }

  .search-box {
    gap: 10px;
  }

  .search-input {
    width: 100% !important;
  }

  .search-btn {
    width: 100%;
  }

  .data-table {
    font-size: 12px;
  }

  .operation-btn {
    margin-bottom: 5px;
  }
}

@media (max-width: 576px) {
  .page-header h3 {
    font-size: 1.2rem;
  }

  .pagination-container {
    justify-content: center;
  }
}
</style>